<template>
  <!-- 私教会员页面 -->
  <div class="vumv">
    <!-- 搜索框 -->
    <el-form ref="table_form" :model="table_form" class="table-search" :inline="true" label-width="100px">
      <el-form-item label="姓名：" prop="realName">
        <el-input v-model="table_form.realName" placeholder="请输入姓名！"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input type="number" v-model="table_form.phone" placeholder="请输入手机号！"></el-input>
      </el-form-item>
      <el-form-item label="微信名称：" prop="wxName">
        <el-input v-model="table_form.wxName" placeholder="请输入微信名称！"></el-input>
      </el-form-item>
      <el-form-item label="创建时间：" prop="endTime">
        <el-date-picker 
          value-format="yyyy-MM-dd HH:mm:ss" 
          v-model="table_form.endTime" 
          type="daterange" 
          :unlink-panels="true"
          :default-time="['00:00:00', '23:59:59']"
          > </el-date-picker>
      </el-form-item>
      <el-form-item label="选择门店：" prop="enterpriseStoreId">
        <el-select clearable v-model="table_form.enterpriseStoreId" placeholder="请选择门店！">
          <el-option
            v-for="item in storeData"
            :key="item.id"
            :label="item.storeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员类型" prop="userType">
        <el-select clearable v-model="table_form.userType" placeholder="请选择会员类型！">
          <el-option
            v-for="item in userTypeData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="-" label-width="10px" prop="userType1">
        <el-select clearable v-model="table_form.userType1" placeholder="请选择会员类型！">
          <el-option
            v-for="item in userTypeData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handle_search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handle_reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格顶部的操作按钮 -->
    <div class="btn-box">
      <!-- 接口返回按钮 -->
      <div class="left">
        <el-button type="primary" v-for="item in btn_data" :key="item.buttonHtmlLayEvent" @click="handle_table_btn(item.buttonHtmlLayEvent)">{{ item.menuDetailButtonName }}</el-button>
      </div>
      <!-- 表格列显示、隐藏 -->
      <div class="right">
        <el-popover
          placement="bottom-end"
          width="150"
          trigger="click">

          <el-checkbox v-model="checked_obj.realName">用户名/微信名称</el-checkbox>
          <el-checkbox v-model="checked_obj.storeNames">所属门店</el-checkbox>
          <el-checkbox v-model="checked_obj.phone">手机号</el-checkbox>
          <el-checkbox v-model="checked_obj.userValidUntil">会员有效期</el-checkbox>
          <el-checkbox v-model="checked_obj.courseName">课程信息</el-checkbox>
          <el-checkbox v-model="checked_obj.weekFrequencyString">上课频率</el-checkbox>
          <el-checkbox v-model="checked_obj.createTime">注册时间</el-checkbox>

          <el-button slot="reference" type="primary" icon="iconfont icon-faxianxuanze"></el-button>
        </el-popover>
        <!-- 导出excell -->
        <el-button type="primary" icon="iconfont icon-export" @click="handle_excell"></el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table id="excell-table" :data="tableData" border header-cell-class-name="table-style" @selection-change="handle_select">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="用户名/微信名称" align="center" v-if="checked_obj.realName">
        <template slot-scope="scope"> 
          <p>{{ scope.row.realName || '--' }}</p>
          <p>{{ scope.row.wxName || '--' }}</p>
          </template>
      </el-table-column>
      <el-table-column label="所属门店" align="center" v-if="checked_obj.storeNames">
        <template slot-scope="scope"> {{ scope.row.storeNames || '--' }} </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" v-if="checked_obj.phone">
        <template slot-scope="scope"> {{ scope.row.phone || '--' }} </template>
      </el-table-column>
      <el-table-column label="会员有效期" align="center" v-if="checked_obj.userValidUntil">
        <template slot-scope="scope"> {{ G_time(scope.row.userValidUntil, 0) || '--' }} </template>
      </el-table-column>
      <el-table-column label="课程信息" align="center" v-if="checked_obj.courseName">
        <template slot-scope="scope">
          <div v-if="scope.row.courseOrderList && scope.row.courseOrderList.length">
            <p v-for="item in scope.row.courseOrderList" :key="item.courseName">{{ item.courseName + ' : ' + item.sumQuantity }}</p>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column label="上课频率" align="center" v-if="checked_obj.weekFrequencyString">
        <template slot-scope="scope">
          <div v-if="set_weekFrequencyString(scope.row.weekFrequencyString) == '--'">--</div>
          <div v-else>
            <p v-for="item in set_weekFrequencyString(scope.row.weekFrequencyString)" :key="item">{{ item }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center" v-if="checked_obj.createTime">
        <template slot-scope="scope"> {{ scope.row.createTime || '--' }} </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      :current-page="table_form.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="prev, pager, next, jumper, sizes, total"
      :total="total_page"
      @size-change="handle_size"
      @current-change="handle_page">
    </el-pagination>

    <!-- 编辑会员基本详情 -->
    <el-dialog
      title="编辑会员基本详情"
      :visible.sync="is_detail_dialog"
      width="30%"
      @open="detail_dialog_open"
      center>
      <el-form ref="detail_form" :model="detail_form" label-width="100px">
        <el-form-item label="真实姓名：">
          <el-input v-model="detail_form.realName" placeholder="请输入真实姓名！"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="detail_form.gender" :label="0">男</el-radio>
          <el-radio v-model="detail_form.gender" :label="1">女</el-radio>
        </el-form-item>
        <el-form-item label="手机号码：">
          <el-input type="number" v-model="detail_form.phone" placeholder="请输入手机号码！"></el-input>
        </el-form-item>
        <el-form-item label="生日：">
           <el-date-picker
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss" 
            default-time="00:00:00"
            v-model="detail_form.birthDay"
            type="date"
            placeholder="请选择生日！">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input type="email" v-model="detail_form.eMail" placeholder="请输入邮箱！"></el-input>
        </el-form-item>
        <el-form-item label="详细住址：">
          <el-input type="address" v-model="detail_form.address" placeholder="请输入详细住址！"></el-input>
        </el-form-item>
        <el-form-item label="主教练：" v-if="user.role == 4">
          <el-select v-model="detail_form.leadCoach" clearable style="width: 100%" placeholder="请选择主教练！">
            <el-option
              v-for="item in detail_coach"
              :key="item.id"
              :label="item.realName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="辅助教练：" v-if="user.role == 4">
          <el-select v-model="detail_form.assistantCoach" clearable style="width: 100%" multiple placeholder="请选择辅助教练！">
            <el-option
              v-for="item in detail_coach"
              :key="item.id"
              :label="item.realName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detail_dialog_close">返 回</el-button>
        <el-button type="primary" @click="detail_dialog_save">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { selectByRule } from '@/utils/apiStore.js'
import { 
  selectByRule as find_member_list, 
  selectByMenuUrl, 
  selectCoachByRule,
  user_updateByPrimaryKeySelective, 
  vipUser_updateByPrimaryKeySelective,
  deleteByPrimaryKey,
  
  } from '@/utils/apiMember.js'

export default {
  data() {
    return {
      table_form: {
        realName:           '',     // 姓名
        phone:              '',     // 手机号
        wxName:             '',     // 微信名称
        endTime:            '',     // 创建时间
        enterpriseStoreId:  '',     // 选择门店
        userType:           '',     // 会员类型
        userType1:          '',     // 会员类型
        vipUserType:        1,    
        createTimeBigin2:   '',     // 开始时间
        createTimeEnd2:     '',     // 结束时间
        page:               1,      // 页数
        rows:               10,     // 每页显示条数
      },
      userTypeData: [
        {
          value: '0',
          label: '系统未绑定会员'
        },
        {
          value: '1',
          label: '有剩余课时会员'
        },
        {
          value: '2',
          label: '即将到期会员'
        },
        {
          value: '3',
          label: '已过期会员'
        },
        {
          value: '4',
          label: '本月过期会员'
        },
        {
          value: '5',
          label: '未绑定主教练会员'
        },
        {
          value: '6',
          label: '体验未成交'
        },
      ],                            // 会员类型下拉框数组
      storeData:            [],     // 选择门店下拉框数组
      tableData:            [],     // 表格数据
      total_page:           0,      // 总条数
      select_table_list:    [],     // 表格选中存储字段
      btn_data:             [],     // 表格顶部的操作按钮
      checked_obj: {
        realName:              true,
        storeNames:            true,
        phone:                 true,
        userValidUntil:        true,
        courseName:            true,
        weekFrequencyString:   true,
        createTime:            true
      },
      is_detail_dialog:     false,   // 编辑弹框显示、隐藏状态
      detail_form: {
        realName:         '', // 真实姓名
        gender:           0, // 性别
        phone:            '', // 手机号码
        birthDay:         '', // 生日
        eMail:            '', // 邮箱
        address:          '', // 详细住址
        leadCoach:        '', // 主教练
        assistantCoach:   [], // 辅助教练
      },
      detail_coach:       [], // 主教练和辅助教练下拉框筛选数据
    }
  },
  computed: {
    ...mapGetters(["user"]),
  },
  mounted () {
   this.get_store()
  },
  methods: {
    // 搜索
    handle_search() {
      // 处理参数 时间
      if (this.table_form.endTime.length == 2) {
        this.table_form.createTimeBigin2  = this.table_form.endTime[0]
        this.table_form.createTimeEnd2    = this.table_form.endTime[1]
      } else {
        this.table_form.endTime           = ''
        this.table_form.createTimeBigin2  = ''
        this.table_form.createTimeEnd2    = ''
      }

      // 分页重置
      this.table_form.page                = 1
      this.table_form.rows                = 10

      this.set_table(this.table_form)
    },

    // 重置resetFields
    handle_reset() {
      this.$refs['table_form'].resetFields()
      this.table_form.page                = 1
      this.table_form.rows                = 10
      this.table_form.createTimeBigin2    = ''
      this.table_form.createTimeEnd2      = ''

      this.set_table(this.table_form)
    },

    // 获取门店下拉框数据
    get_store() {
      selectByRule({page: 1, rows: 999999}).then(res => {
        if (res.errCode == 200) {
          let { elements } = res.data
          this.storeData = elements

          this.set_table(this.table_form)
        }
      })
    },

    // 渲染表格方法
    set_table(params) {
      this.tableData        = []
      this.btn_data         = []
      find_member_list(params).then(res => {
        if (res.errCode == 200) {
          this.tableData    = res.data.elements
          this.total_page   = res.data.totalCount

          // 获取表格操作按钮
          selectByMenuUrl({ menuUrl: this.$route.path }).then(result => {
            if (result.errCode == 200) {
              this.btn_data = result.data
            }
          })
        }
      })
    },

    // 处理上课频率
    set_weekFrequencyString(data) {
      if (data) {
        data = data.split(';')
        return data
      }
      return '--'
    },

    // 分页条数修改
    handle_size(rows) {
      this.table_form.rows = rows

      this.set_table(this.table_form)
    },

    // 页码数改变
    handle_page(page) {
      this.table_form.page = page

      this.set_table(this.table_form)
    },

    // 表格选中
    handle_select(value) {
      this.select_table_list = value
    },

    // 表格顶部按钮操作
    handle_table_btn(event_name) {
      if (this.select_table_list.length > 1) {
        return this.$message.error({
          message: '不能同时操作两条数据！',
          offset: document.body.offsetHeight / 2
        })
      }

      if (this.select_table_list.length == 0) {
        return this.$message.error({
          message: '请选择一条数据进行操作！',
          offset: document.body.offsetHeight / 2
        })
      }

      let id = this.select_table_list[0].id

      switch (event_name) {
        // 编辑
        case 'edit': {
          this.is_detail_dialog = true

          this.detail_form.realName     = this.select_table_list[0].realName || ''
          this.detail_form.gender       = this.select_table_list[0].gender 
          this.detail_form.phone        = this.select_table_list[0].phone || ''
          this.detail_form.birthDay     = this.select_table_list[0].birthDay || ''
          this.detail_form.eMail        = this.select_table_list[0].eMail || ''
          this.detail_form.address      = this.select_table_list[0].address || ''
          this.detail_form.id           = this.select_table_list[0].id || ''
          this.detail_form.role         = this.select_table_list[0].role || ''
           
          break
        }

        // 查看
        case 'detail': {
          this.$router.push({
            path: '/admin/umvc/vipUserDetail',
            query: { id }
          })
          break
        }

        // 删除
        case 'delete': {
           this.$confirm('确定删除?', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteByPrimaryKey({id}).then(res => {
                if (res.errCode == 200) {
                  this.$message.success({
                    message: '删除成功！',
                    offset: document.body.offsetHeight / 2,
                    onClose: () => {
                      this.set_table(this.table_form)
                    }
                  })
                }
              })
            }).catch(action => {});
          break
        }

        // 添加私教订单
        case 'addOrder': {
          console.log('添加私教订单:', event_name);
          break
        }

        // 添加团课订单
        case 'groupClassOrder': {
          console.log('添加团课订单:', event_name);
          break
        }

        // 添加会籍订单
        case 'addhuiji': {
          console.log('添加会籍订单:', event_name);
          break
        }

        // 暂停
        case 'stop': {
          console.log('暂停:', event_name);
          break
        }

        // 暂停列表
        case 'stopList': {
          console.log('暂停列表:', event_name);
          break
        }

        // 身体数据
        case 'lookBodyData': {
          console.log('身体数据:', event_name);
          break
        }

        // 添加身体数据
        case 'addBodyData': {
          console.log('添加身体数据:', event_name);
          break
        }

        // 会员转店
        case 'transferShop': {
          console.log('会员转店:', event_name);
          break
        }

        // 增加门店关系
        case 'storeRelationship': {
          console.log('增加门店关系:', event_name);
          break
        }

        // 转课
        case 'transferCourse': {
          console.log('转课:', event_name);
          break
        }

        // 调课
        case 'changingCourse': {
          console.log('调课:', event_name);
          break
        }

        // 关闭教练训练
        case 'closeCoachLimit': {
          console.log('关闭教练训练:', event_name);
          break
        }

        // 重新绑定
        case 'againBind': {
          console.log('重新绑定:', event_name);
          break
        }

        // 一键绑定辅助教练
        case 'keyBinding': {
          console.log('一键绑定辅助教练:', event_name);
          break
        }

        // 定金收取
        case 'depositCharge': {
          console.log('定金收取:', event_name);
          break
        }
      }

    },

    // 导出excell
    handle_excell() {
      this.$confirm('是否导出excell表格?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.G_excell2()
      }).catch(action => {});
      
    },

    // 编辑会员详情弹框打开事件
    detail_dialog_open() {
      selectCoachByRule({page: 1, rows: 99999}).then(res => {
        if (res.errCode == 200) {
          this.detail_coach = res.data.elements
        }
      })
    },

    // 编辑会员详情弹框关闭事件
    detail_dialog_close() {
      this.is_detail_dialog = false 
      this.reset_detail_form()
    },

    // 编辑会员详情弹框确定保存
    detail_dialog_save() {
      user_updateByPrimaryKeySelective(this.detail_form).then(res => {
        if (res.errCode == 200) {
          if (this.user.role == 4) {
            vipUser_updateByPrimaryKeySelective(this.detail_form).then(res => {
              if (res.errCode == 200) {
                this.detail_dialog_close()
                this.$message.success({
                  message: '保存成功！',
                  offset: document.body.offsetHeight / 2,
                  onClose: () => {
                    this.set_table(this.table_form)
                  }
                })
              }
            })
          } else {
            this.detail_dialog_close()
            this.$message.success({
              message: '保存成功！',
              offset: document.body.offsetHeight / 2,
              onClose: () => {
                this.set_table(this.table_form)
              }
            })
          }
        }
      })
    },

    // 编辑会员详情弹框表单清空
    reset_detail_form() {
      this.detail_form.realName           = ''
      this.detail_form.gender             = 0
      this.detail_form.phone              = ''
      this.detail_form.birthDay           = ''
      this.detail_form.eMail              = ''
      this.detail_form.address            = ''
      this.detail_form.id                 = ''
      this.detail_form.role               = ''
      this.detail_form.leadCoach          = ''
      this.detail_form.assistantCoach     = []
    }
  }
};
</script>

<style lang="scss" scoped>
.vumv {
}
</style>